<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="css/style.css" />

	<script src="http://47.106.66.89:8080/js/vue.min.js"></script>
	<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
	<link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
	<script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
	<script src="./js/vote.js"></script>
</head>
<body>
<div id="app">

	<vote  >

		<div id="vote" class="wrap">
			<h2 style="display: flex;justify-content: space-between;align-items: center;">
				查看投票
				<el-row>

					<el-button  @click="del">删除</el-button>
					<el-button  @click="">修改</el-button>
				</el-row>
			</h2>
			<ul class="list">
				<li>
					<h4>{{vote.vname}}</h4>
					<p class="info">共有 {{vote.items.length}} 个选项，已有 {{vote.unum}} 个网友参与了投票。</p>
					 <ol>

						 <li v-for="item in vote.items">{{item.iname}}
							 <div class="rate">
								 <div class = "ratebg">
									 <div class="percent"
										  :style="{width:item.rate}"></div>
								 </div>
								 <p>{{item.unum}}票<span>({{item.rate}})</span></p>
							 </div>
						 </li>



					</ol>
					<div class="goback"><a href="index.html">返回投票列表</a></div>
				</li>
			</ul>
		</div>
	</vote>


</div>


<script>
	var v = new Vue({
		el : "#app",
		data : {
			vote : {items:[]}

		},
		created() {
			axios.get("vote/vote/find"+location.search).then(res=>{
				this.vote = res.data;
				//统计总数
				let sum = this.vote.items
					.map(item=>item.unum)//  对象 转  数字
					.reduce( (a,b) => a+b );//求和
				this.vote.items.forEach(item=>{
					if(sum > 0){
						//计算百分率
						item.rate = parseInt(item.unum* 100 / sum) + "%";
					}
					else{
						item.rate = "0%";
					}
				})
			})

		},
		methods : {
			del(){

				this.$confirm('请确认是否删除该投票, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {


					 axios.get("/vote/vote/del"+location.search).then(res=>{
						 if(res.data.code === 1){
							 location.href = "/index.html";
						 }
						 else{
							 this.$alert(res.data.msg);
						 }
					 })

				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});

			}
		}
	})
</script>

</body>
</html>
